<HTML>
<HEAD>
<TITLE>[Chapter 1] 1.3 Layouts</TITLE>
<META NAME="author" CONTENT="John Zukowski">
<META NAME="date" CONTENT="Thu Jul 31 14:21:32 1997">
<META NAME="form" CONTENT="html">
<META NAME="metadata" CONTENT="dublincore.0.1">
<META NAME="objecttype" CONTENT="book part">
<META NAME="otheragent" CONTENT="gmat dbtohtml">
<META NAME="publisher" CONTENT="O'Reilly &amp; Associates, Inc.">
<META NAME="source" CONTENT="SGML">
<META NAME="subject" CONTENT="Java AWT">
<META NAME="title" CONTENT="Java AWT">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
</HEAD>
<body vlink="#551a8b" alink="#ff0000" text="#000000" bgcolor="#FFFFFF" link="#0000ee">

<DIV CLASS=htmlnav>
<H1><a href='index.htm'><IMG SRC="gifs/smbanner.gif"
     ALT="Java AWT" border=0></a></H1>
<table width=515 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=172 align=left valign=top><A HREF="ch01_02.htm"><IMG SRC="gifs/txtpreva.gif" ALT="Previous" border=0></A></td>
<td width=171 align=center valign=top><B><FONT FACE="ARIEL,HELVETICA,HELV,SANSERIF" SIZE="-1">Chapter 1<br>Abstract Window Toolkit Overview</FONT></B></TD>
<td width=172 align=right valign=top><A HREF="ch01_04.htm"><IMG SRC="gifs/txtnexta.gif" ALT="Next" border=0></A></td>
</tr>
</table>

&nbsp;
<hr align=left width=515>
</DIV>
<DIV CLASS=sect1>
<h2 CLASS=sect1><A CLASS="TITLE" NAME="JAWT-CH-1-SECT-3">1.3 Layouts</A></h2>

<P CLASS=para>
<A NAME="CH01.LAY"></A><A NAME="CH01.LAY2"></A>Layouts allow you to format components on the screen in a platform-independent 
way. Without layouts, you would be forced to place components at explicit 
locations on the screen, creating obvious problems for programs that need 
to run on multiple platforms. There's no guarantee that a <tt CLASS=literal>TextArea</tt> 
or a <tt CLASS=literal>Scrollbar</tt> or any other 
component will be the same size on each platform; in fact, you can bet 
they won't be. In an effort to make your Java creations portable 
across multiple platforms, Sun created a <tt CLASS=literal>LayoutManager</tt> 
interface that defines methods to reformat the screen based on the current 
layout and component sizes. Layout managers try to give programs a consistent 
and reasonable appearance, regardless of the platform, the screen size, 
or actions the user might take. 

<P CLASS=para>
The standard JDK provides five classes that implement 
the <tt CLASS=literal>LayoutManager</tt> interface. 
They are <tt CLASS=literal>FlowLayout</tt>, <tt CLASS=literal>GridLayout</tt>, 
<tt CLASS=literal>BorderLayout</tt>, <tt CLASS=literal>CardLayout</tt>, 
and <tt CLASS=literal>GridBagLayout</tt>. All of these 
layouts are covered in much greater detail in <A HREF="ch07_01.htm">Chapter 7, <i>Layouts</i></A>. This chapter 
also discusses how to create complex layouts by combining layout managers 
and how to write your own <tt CLASS=literal>LayoutManager</tt>. 
The Java 1.1 JDK includes the <tt CLASS=literal>LayoutManager2</tt> 
interface. This interface extends the <tt CLASS=literal>LayoutManager</tt> 
interface for managers that provide constraint-based layouts. 

<DIV CLASS=sect2>
<h3 CLASS=sect2><A CLASS="TITLE" NAME="JAWT-CH-1-SECT-3.1">FlowLayout</A></h3>

<P CLASS=para>
The <tt CLASS=literal>FlowLayout</tt> is the default 
layout for the <tt CLASS=literal>Panel</tt> class, 
which includes its most famous subclass, <tt CLASS=literal>Applet</tt>. 
When you add components to the screen, they flow left to right (centered 
within the applet) based upon the order added and the width of the applet. 
When there are too many components to fit, they "wrap" to a 
new row, similar to a word processor with word wrap enabled. If you resize 
an applet, the components' flow will change based upon the new width 
and height. <A HREF="ch01_03.htm#JAWT-CH-1-FIG-11">Figure 1.11</A> shows an example both before 
and after resizing. <A HREF="ch07_02.htm#JAWT-CH-7-SECT-2">FlowLayout</A>
contains all the <tt CLASS=literal>FlowLayout</tt> 
details. 

<DIV CLASS=figure>
<h4 CLASS=figure><A CLASS="TITLE" NAME="JAWT-CH-1-FIG-11">Figure 1.11: A FlowLayout before and after resizing</A></h4>


<p>
<img align=middle src="./figs/jawt0111.gif" alt="[Graphic: Figure 1-11]" width=453 height=178 border=0>

</DIV>

</DIV>

<DIV CLASS=sect2>
<h3 CLASS=sect2><A CLASS="TITLE" NAME="JAWT-CH-1-SECT-3.2">GridLayout</A></h3>

<P CLASS=para>
The <tt CLASS=literal>GridLayout</tt> is widely used 
for arranging components in rows and columns. As with <tt CLASS=literal>FlowLayout</tt>, 
the order in which you add components is relevant. You start at row one, 
column one, move across the row until it's full, then continue on 
to the next row. However, unlike <tt CLASS=literal>FlowLayout</tt>, 
the underlying components are resized to fill the row-column area, if possible. 
<tt CLASS=literal>GridLayout</tt> can reposition or 
resize objects after adding or removing components. Whenever the area is 
resized, the components within it are resized. <A HREF="ch01_03.htm#JAWT-CH-1-FIG-12">Figure 1.12</A> 
shows an example before and after resizing. <A HREF="ch07_04.htm#JAWT-CH-7-SECT-4">GridLayout</A>
contains all the details about <tt CLASS=literal>GridLayout</tt>. 

<DIV CLASS=figure>
<h4 CLASS=figure><A CLASS="TITLE" NAME="JAWT-CH-1-FIG-12">Figure 1.12: A GridLayout before and after resizing</A></h4>


<p>
<img align=middle src="./figs/jawt0112.gif" alt="[Graphic: Figure 1-12]" width=453 height=178 border=0>

</DIV>

</DIV>

<DIV CLASS=sect2>
<h3 CLASS=sect2><A CLASS="TITLE" NAME="JAWT-CH-1-SECT-3.3">BorderLayout</A></h3>

<P CLASS=para>
<tt CLASS=literal>BorderLayout</tt> is one of the 
more unusual layouts provided. It is the default layout for <tt CLASS=literal>Window</tt>, 
along with its children, <tt CLASS=literal>Frame</tt> 
and <tt CLASS=literal>Dialog</tt>. <tt CLASS=literal>BorderLayout</tt> 
provides five areas to hold components. These areas are named after the 
four different borders of the screen, <tt CLASS=literal>North</tt>, 
<tt CLASS=literal>South</tt>, <tt CLASS=literal>East</tt>, 
and <tt CLASS=literal>West</tt>, with 
any remaining space going into the <tt CLASS=literal>Center</tt> 
area. When you add a component to the layout, you must specify which area 
to place it in. The order in which components are added to the screen is 
not important, although you can have only one component in each area. 
<A HREF="ch01_03.htm#JAWT-CH-1-FIG-13">Figure 1.13</A> shows a <tt CLASS=literal>BorderLayout</tt> that has one button 
in each area, before and after resizing. <A HREF="ch07_03.htm#JAWT-CH-7-SECT-3">BorderLayout</A>
covers the details of the <tt CLASS=literal>BorderLayout</tt>. 

<DIV CLASS=figure>
<h4 CLASS=figure><A CLASS="TITLE" NAME="JAWT-CH-1-FIG-13">Figure 1.13: A BorderLayout</A></h4>


<p>
<img align=middle src="./figs/jawt0113.gif" alt="[Graphic: Figure 1-13]" width=503 height=178 border=0>

</DIV>

</DIV>

<DIV CLASS=sect2>
<h3 CLASS=sect2><A CLASS="TITLE" NAME="JAWT-CH-1-SECT-3.4">CardLayout</A></h3>

<P CLASS=para>
The <tt CLASS=literal>CardLayout</tt> is a bit on 
the strange side. A <tt CLASS=literal>CardLayout</tt> 
usually manages several components, displaying one of them at a time and 
hiding the rest. All the components are given the same size. Usually, the 
<tt CLASS=literal>CardLayout</tt> manages a group 
of <tt CLASS=literal>Panels</tt> (or some other container), 
and each <tt CLASS=literal>Panel</tt> contains several 
components of its own. With a little work, you can use the <tt CLASS=literal>CardLayout</tt> 
to create tabbed dialog boxes or property sheets, which are not currently 
part of AWT. <tt CLASS=literal>CardLayout</tt> lets 
you assign names to the components it is managing and lets you jump to 
a component by name. You can also cycle through components in order. <A HREF="ch01_03.htm#JAWT-CH-1-FIG-11">Figure 1.11</A>, <A HREF="ch01_03.htm#JAWT-CH-1-FIG-12">Figure 1.12</A>, and <A HREF="ch01_03.htm#JAWT-CH-1-FIG-13">Figure 1.13</A> show multiple cards controlled by a single <tt CLASS=literal>CardLayout</tt>. 
Selecting the <tt CLASS=literal>Choice</tt> button 
displays a different card. <A HREF="ch07_05.htm#JAWT-CH-7-SECT-5">CardLayout</A> 
discusses the details of <tt CLASS=literal>CardLayout</tt>. 

</DIV>

<DIV CLASS=sect2>
<h3 CLASS=sect2><A CLASS="TITLE" NAME="JAWT-CH-1-SECT-3.5">GridBagLayout</A></h3>

<P CLASS=para>
<tt CLASS=literal>GridBagLayout</tt> is the most sophisticated 
and complex of the layouts provided in the development kit. With the <tt CLASS=literal>GridBagLayout</tt>, 
you can organize components in multiple rows and columns, stretch specific 
rows or columns when space is available, and anchor objects in different 
corners. You provide all the details of each component through instances 
of the <tt CLASS=literal>GridBagConstraints</tt> class. 
<A HREF="ch01_03.htm#JAWT-CH-1-FIG-14">Figure 1.14</A> shows an example of a <tt CLASS=literal>GridBagLayout</tt>. 
<tt CLASS=literal>GridBagLayout</tt> and <tt CLASS=literal>GridBagConstraints</tt> 
are discussed in <A HREF="ch07_06.htm#JAWT-CH-7-SECT-6">GridBagLayout</A> and <A HREF="ch07_07.htm#JAWT-CH-7-SECT-7">GridBagConstraints</A>. 

<DIV CLASS=figure>
<h4 CLASS=figure><A CLASS="TITLE" NAME="JAWT-CH-1-FIG-14">Figure 1.14: A GridBagLayout</A></h4>


<p>
<img align=middle src="./figs/jawt0114.gif" alt="[Graphic: Figure 1-14]" width=117 height=105 border=0>

</DIV>

</DIV>

</DIV>


<DIV CLASS=htmlnav>

<P>
<HR align=left width=515>
<table width=515 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=172 align=left valign=top><A HREF="ch01_02.htm"><IMG SRC="gifs/txtpreva.gif" ALT="Previous" border=0></A></td>
<td width=171 align=center valign=top><a href="index.htm"><img src='gifs/txthome.gif' border=0 alt='Home'></a></td>
<td width=172 align=right valign=top><A HREF="ch01_04.htm"><IMG SRC="gifs/txtnexta.gif" ALT="Next" border=0></A></td>
</tr>
<tr>
<td width=172 align=left valign=top>Peers</td>
<td width=171 align=center valign=top><a href="index/idx_a.htm"><img src='gifs/index.gif' alt='Book Index' border=0></a></td>
<td width=172 align=right valign=top>Containers</td>
</tr>
</table>
<hr align=left width=515>

<IMG SRC="gifs/smnavbar.gif" USEMAP="#map" BORDER=0> 
<MAP NAME="map"> 
<AREA SHAPE=RECT COORDS="0,0,108,15" HREF="../javanut/index.htm"
alt="Java in a Nutshell"> 
<AREA SHAPE=RECT COORDS="109,0,200,15" HREF="../langref/index.htm" 
alt="Java Language Reference"> 
<AREA SHAPE=RECT COORDS="203,0,290,15" HREF="../awt/index.htm" 
alt="Java AWT"> 
<AREA SHAPE=RECT COORDS="291,0,419,15" HREF="../fclass/index.htm" 
alt="Java Fundamental Classes"> 
<AREA SHAPE=RECT COORDS="421,0,514,15" HREF="../exp/index.htm" 
alt="Exploring Java"> 
</MAP>
</DIV>

</BODY>
</HTML>
